<template>
  <div class="add-house">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <van-form>
      <div class="add-house-header">房源信息</div>
      <div class="add-house-body">
        <!-- 小区部分 -->
        <van-cell-group>
          <van-field
            v-model="areaName"
            name="小区名称"
            label="小区名称"
            placeholder="请输入小区名称"
            input-align="right"
            right-icon="arrow"
          />
        </van-cell-group>
        <!-- 租金部分 -->
        <van-cell-group>
          <van-field
            v-model="rentMoney"
            name="租金"
            label="租金"
            placeholder="请输入租金/月"
            type="number"
            right-icon="arrow"
          >
            <template #right-icon>
              <span>￥/月</span>
            </template>
          </van-field>
        </van-cell-group>
        <!-- 建筑面积部分 -->
        <van-cell-group>
          <van-field
            v-model="measureArea"
            name="建筑面积"
            label="建筑面积"
            placeholder="请输入建筑面积"
            right-icon="arrow"
            type="number"
          >
            <template #right-icon>
              <span>㎡</span>
            </template>
          </van-field>
        </van-cell-group>
        <!-- 户型 -->
        <van-cell-group>
          <van-field
            :value="houseType"
            clickable
            name="户型"
            readonly
            label="户型"
            right-icon="arrow"
            placeholder="请选择"
            input-align="right"
            @click="showHouseType = true"
          >
          </van-field>
        </van-cell-group>
        <!-- 所在楼层 -->
        <van-cell-group>
          <van-field
            :value="floor"
            clickable
            name="所在楼层"
            readonly
            label="所在楼层"
            right-icon="arrow"
            placeholder="请选择"
            input-align="right"
            @click="showFloor = true"
          >
          </van-field>
        </van-cell-group>
        <!-- 朝向 -->
        <van-cell-group>
          <van-field
            :value="turn"
            clickable
            name="朝向"
            readonly
            label="朝向"
            right-icon="arrow"
            placeholder="请选择"
            input-align="right"
            @click="showTurn = true"
          >
          </van-field>
        </van-cell-group>
        <!-- 房屋标题 -->
        <van-field class="add-house-body-text" name="房屋描述" label="房屋描述">
          <template #input>
            <textarea placeholder="请输入标题（例如：整租 小区名 2室 5000元）" v-model="areaText"></textarea>
          </template>
        </van-field>
        <!-- 房屋图像 -->
        <van-field class="add-house-body-image" name="房屋图像" label="房屋图像">
          <template #input>
            <van-uploader v-model="image" multiple upload-icon="plus" />
          </template>
        </van-field>
        <!-- 房屋配置 -->
        <van-field class="add-house-body-deploy" name="房屋配置" label="房屋配置">
          <template #input>
            <van-grid :column-num="5" :border="false">
              <van-grid-item
                ref="item"
                icon-prefix="icon"
                class="iconfont"
                :class="{ active: deploy.includes(item.value) }"
                v-for="item in columnDeploy"
                :key="item.id"
                :icon="item.icon"
                :text="item.value"
                @click="addDeploy(item.value)"
              />
            </van-grid>
          </template>
        </van-field>
        <!-- 房屋描述 -->
        <van-field class="add-house-body-content" name="房屋描述" label="房屋描述">
          <template #input>
            <textarea placeholder="请输入房屋描述信息" v-model="content"></textarea>
          </template>
        </van-field>
        <!-- 户型选择器 -->
        <van-popup v-model="showHouseType" position="bottom">
          <van-picker show-toolbar :columns="columnHouseType" @confirm="onHouseType" @cancel="showHouseType = false" />
        </van-popup>
        <!-- 楼层选择器 -->
        <van-popup v-model="showFloor" position="bottom">
          <van-picker show-toolbar :columns="columnFloor" @confirm="onFloor" @cancel="showFloor = false" />
        </van-popup>
        <!-- 朝向选择器 -->
        <van-popup v-model="showTurn" position="bottom">
          <van-picker show-toolbar :columns="columnTurn" @confirm="onTurn" @cancel="showTurn = false" />
        </van-popup>
        <!-- 确认取消按钮 -->
        <div>
          <van-button class="cancel" :block="false" type="default" @click="onCancel">取消</van-button>
        </div>
        <div>
          <van-button class="submit" :block="false" type="info" native-type="submit" @click="onSubmit">提交</van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script>
import '@/assets/css/iconfont.css'
// import { Dialog } from 'vant'
// import { houseInput } from '@/api/user'
export default {
  components: {},
  props: {},
  data() {
    return {
      areaName: '',
      rentMoney: '',
      measureArea: '',
      houseType: '',
      showHouseType: false,
      columnHouseType: ['一室', '二室', '三室', '四室', '四室+'],
      floor: '',
      showFloor: false,
      columnFloor: ['高楼层', '中楼层', '低楼层'],
      turn: '',
      showTurn: false,
      columnTurn: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      areaText: '',
      image: [],
      deploy: [],
      columnDeploy: [
        {
          id: 1,
          value: '衣柜',
          icon: 'yigui'
        },
        {
          id: 2,
          value: '洗衣机',
          icon: 'xiyiji'
        },
        {
          id: 3,
          value: '空调',
          icon: 'kongdiao'
        },
        {
          id: 4,
          value: '天然气',
          icon: 'meiqitianranqi'
        },
        {
          id: 5,
          value: '冰箱',
          icon: 'bingxiang'
        },
        {
          id: 6,
          value: '暖气',
          icon: 'nuanqi'
        },
        {
          id: 7,
          value: '电视',
          icon: 'dianshi'
        },
        {
          id: 8,
          value: '热水器',
          icon: 'reshuiqi'
        },
        {
          id: 9,
          value: '宽带',
          icon: 'kuandai'
        },
        {
          id: 10,
          value: '沙发',
          icon: 'iconyihuifu-'
        }
      ],
      content: '',
      body: {},
      obj: {}
    }
  },
  computed: {},
  watch: {},
  async created() {
    ;(this.areaName = ''),
      (this.rentMoney = ''),
      (this.measureArea = ''),
      (this.houseType = ''),
      (this.floor = ''),
      (this.turn = ''),
      (this.areaText = ''),
      (this.image = []),
      (this.deploy = []),
      (this.content = ''((this.body = {})))
    const { body } = await obj()
    this.params = body
    console.log(this.params)
  },
  methods: {
    onHouseType(value) {
      this.houseType = value
      this.showHouseType = false
    },
    onFloor(value) {
      this.floor = value
      this.showFloor = false
    },
    onTurn(value) {
      this.turn = value
      this.showTurn = false
    },
    addDeploy(value) {
      this.deploy.includes(value)
        ? (this.deploy = this.deploy.filter(item => item !== value))
        : (this.deploy = [...this.deploy, value])
    },
    onSubmit() {
      this.obj = {
        title: '整租 · 豪华小区 精装修出租 小区环境幽静',
        description: '【装修描述】 装修简洁，家电配齐，通风采光效果良好，格局方正。',
        houseImg: 'img1|im2|img3',
        oriented: 'ORIEN|caa6f80b-b764-c2df',
        supporting: '空调|洗衣机',
        price: '1234',
        roomType: 'ROOM|ce2a5daa-811d-2f49',
        size: '123',
        floor: 'FLOOR|1',
        community: 'AREA|93cbbe43-741d-de54'
      }
    },
    onCancel() {}
  }
}
</script>

<style scoped lang="less">
.add-house {
  background-color: #f6f5f6;
  .van-nav-bar {
    background-color: #087;
  }
  .add-house-header {
    color: #087;
    background-color: #fff;
    font-size: 15px;
    padding: 15px 15px 9px 15px;
    box-sizing: border-box;
  }
  ::v-deep .van-field {
    width: 380px;
    height: 44px;
  }
  ::v-deep .van-field__control {
    height: 24px;
    font-size: 14px;
  }
  ::v-deep .add-house-body-text {
    height: 20vw;
    display: block;
    .van-field__body {
      border-top: 1px solid rgba(136, 136, 136, 0.1);
      margin-top: 5px;
      padding-top: 5px;
    }
    textarea {
      width: 100%;
      height: 8vw;
      font-size: 14px;
      border: none;
      // margin-bottom: 60px;
      &::placeholder {
        color: rgba(136, 136, 136, 0.5);
      }
    }
  }
  ::v-deep .add-house-body-image {
    display: block;
    height: 35vw;
    .van-field__label {
      width: 100%;
      border-bottom: 1px solid rgba(136, 136, 136, 0.1);
    }
    .van-uploader__upload {
      margin-top: 80px;
    }
  }
  ::v-deep .add-house-body-deploy {
    display: block;
    height: 60vw;
    .van-field__label {
      width: 100%;
      border-bottom: 1px solid rgba(136, 136, 136, 0.1);
      border: none;
    }
    .van-grid {
      margin-top: 140px;
      border: none;
    }
    i {
      font-style: normal;
    }
  }
  ::v-deep .add-house-body-content {
    margin-top: 20px;
    height: 180px;
    display: block;
    .van-field__body {
      border-top: 1px solid rgba(136, 136, 136, 0.1);
      margin-top: 5px;
      padding-top: 5px;
    }
    textarea {
      width: 100%;
      height: 8vw;
      font-size: 14px;
      border: none;
      // margin-bottom: 60px;
      &::placeholder {
        color: rgba(136, 136, 136, 0.5);
      }
    }
  }
  ::v-deep .active {
    color: #087;
    .van-grid-item__text {
      color: #087;
    }
  }
  .cancel {
    position: fixed;
    bottom: 0;
    left: 0;
    color: #21b97a;
    width: 50%;
    border-radius: 0%;
  }
  .submit {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50%;
    border-radius: 0%;
  }
}
</style>
